<template>
    <div class="cart">
      <div v-if="allGoods.length">
        <div v-for="(item, index) in allGoods" :key="index">
          <div class="goods-item">
            <div class="left">
              <img :src="item.img" />
            </div>
            <div class="right">
              <div class="title">商品名称：{{item.name}}</div>
              <div class="price">商品价格：{{item.price}}</div>
            </div>
            <div class="action">
              <div class="add">
                <van-button icon="plus" size="mini" type="primary" @click="add(item)" />
              </div>
              <div class="del">
                <van-button icon="minus" size="mini" type="primary" @click="minus(item)" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <van-empty description="购物车里暂时没有商品啦，快去添加吧！" />
      </div>
      <van-action-bar>
        <van-action-bar-icon
          icon="cart-o"
          text="总数"
          :badge="totalCount"
          @click="onClickCount(totalCount)"
        />
        <van-action-bar-icon
          icon="shop-o"
          text="总价"
          :badge="totalPrice"
          @click="onClickPrice(totalPrice)"
        />
        <van-action-bar-button type="danger" text="立即购买" @click="onBuying" />
      </van-action-bar>
    </div>
  </template>
  
  <script>
  import { getCurrentInstance, reactive, toRefs } from 'vue'
  import { useRoute } from 'vue-router'
  export default {
    setup () {
      const { proxy } = getCurrentInstance()
      const state = reactive({
        goods: '',
        allGoods: JSON.parse(localStorage.getItem('allGoods')) || [],
        totalCount: 0,
        totalPrice: 0
      })
      let route = useRoute();
      let goods = route.query;
      // console.log(goods);
  
      if (goods.name) {
        state.goods = goods;
        state.allGoods.push(state.goods)
        localStorage.setItem('allGoods', JSON.stringify(state.allGoods))
      }
  
  
      const computeTotal = () => {
        state.totalCount = state.allGoods.length;
        state.allGoods.forEach(item => {
          state.totalPrice += item.price ? parseInt(item.price) : 0
        });
      }
      computeTotal();
      const onClickCount = (count) => {
        proxy.$toast(`您一共选择了${count}件商品`)
      };
      const onClickPrice = (price) => {
        proxy.$toast(`您应支付共${price}元`)
      };
      const onBuying = () => {
        // 清空购物车
        proxy.$toast.success('购买成功')
        localStorage.removeItem('allGoods');
        state.totalCount = 0;
        state.totalPrice = 0;
        state.allGoods = [];
      }
  
      const add = (good) => {
        state.allGoods.push(good);
        localStorage.setItem('allGoods', JSON.stringify(state.allGoods))
        computeTotal();
      }
  
      const minus = (good) => {
        const index = state.allGoods.indexOf(good);
        state.allGoods.splice(index, 1);
        localStorage.setItem('allGoods', JSON.stringify(state.allGoods))
        computeTotal();
      }
  
      return {
        goods,
        ...toRefs(state),
        onClickCount,
        onClickPrice,
        onBuying,
        add,
        minus
      };
    },
  }
  </script>
  
  <style scoped>
  .cart {
    padding-bottom: 6.25rem;
  }
  .goods-item {
    display: flex;
    padding: 10px;
    border: 1px solid #eee;
  }
  .left {
    flex: 1;
    height: 6.25rem;
  }
  .left img {
    width: 100%;
    height: 100%;
  }
  .right {
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .right .title,
  .right .price {
    margin-left: 1.25rem;
    margin-bottom: 1.25rem;
  }
  .action {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .van-action-bar {
    bottom: 50px;
    justify-content: space-around;
  }
  .van-action-bar-button--last {
    max-width: 200px !important;
  }
  </style>